<template>
    <div class="findpwd">
        <div class="form">
             <div class="opt">
                  <span class="label">账号/邮箱:</span>
                  <input v-model="form.account" type="text" placeholder="请输入账号/邮箱">
             </div>
             <div class="opt opt-2">
                 <span class="label">验证码:</span>
                 <input v-model="form.vcode" type="text" placeholder="请输入密码">
                 <button @click="sendEmailFn" class="btn-send">{{ message }}</button>
            </div>
            <div class="opt">
                 <span class="label">新密码:</span>
                 <input  v-model="form.password"  type="password" placeholder="请输入密码">
            </div>
            <div class="opt">
                 <span class="label">确认密码:</span>
                 <input  v-model="form.password2"  type="password" placeholder="请确认密码">
            </div>


            <div class="opt">
                <van-button @click="saveFn" class="btn-login" type="default">保存</van-button>
            </div>

        </div>

        <div class="bottom">
            <van-button @click="jumpTo" type="default"  plain color="#cccccc">首页</van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive , ref} from 'vue';
import { useRouter } from 'vue-router'
import request from '@/api/request';
import { showFailToast, showSuccessToast, showToast } from 'vant';
const $router = useRouter()
const jumpTo = ()=> {
    $router.push({path:'/home/category'})
}

// account, password
const form = reactive<any>({
    account:"", 
    password2:"",
    password:"",
    vcode: ""
})

// 保存修改密码
const saveFn = async ()=> {
    let {account, vcode,password,password2} = form;
    if(account && password && password2 && vcode) {
         // 布尔值
        let isPass = false;
        // 判断验证码是否正确
        await request.emailVerify({email: account, vcode: vcode})
        .then(
            content=>{
                let {code,msg} = content;
                if(code == 200) {
                    isPass = true;
                }
                else {
                    showToast(msg)
                }
            }
        )
        
        // 判断是否验证通过
        if(isPass) {
            if(password != password2) {
                showToast("两次输入密码不一致")
            }
            else {
                await request.findpwd({account,password})
                .then(
                    (content: any)=>{
                        let {msg , code} = content;
                        if(code ==200) {
                            showSuccessToast("设置密码成功")
                            setTimeout(()=>{
                                $router.replace({path:'/login'})
                            },150)
                        }
                        else {
                            showFailToast("设置密码失败")
                        }
                    }
                )
            }
        }

    }
    else {
        showToast("缺少参数，请重新填写")
    }
}

// 发送验证码
let message = ref('发送邮箱验证码')
let num = ref(60);
let isSend: boolean = true;
let timer: any = null;
// 倒计时数数
const downNum = () => {
    num.value --;
    message.value = `${num.value}秒后重新发送`
    timer = setInterval(()=>{
        num.value --;
        message.value = `${num.value}秒后重新发送`
        if(num.value == 0) {
            clearInterval(timer);
            message.value = `点击重新发送`
            isSend = true;
            num.value = 60;
        }
    },1000)
}
// 发邮箱验证码
const sendEmailFn = async () => {
    // 获取邮箱/账号
    let email = form.account;
    // console.log("用户输入的验证码:",vcode.value);
    // console.log("邮箱:",email);
    if (email.length != 0) {
        if (/\w+@qq.com$/.test(email)) {
            // 布尔值做开关
            if (isSend) {
                isSend = false;
                downNum();
                // 调用api发送邮件
                await request.emailSend({ email })
                    .then(
                        content => {
                            // console.log(content);
                            let {msg} = content;
                            showToast(msg)
                        }
                    )
            }
        }
        else {
            showToast("邮箱格式不正确")
        }
    }
    else {
        showFailToast("请输入账号")
    }
}

</script>

<style lang="less">
@import '../../static/less/variable.less';
.findpwd {
    padding: @pad;
    font-size: 18px;
    .form {
        padding-top: 50px;
        .opt {
            margin-top: 15px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 16px;
            .label {
                width: 90px;
                display: inline-block;
                flex-shrink: 0;
                text-align: right;
                padding-right: 10px;
                height: 44px;
                line-height: 44px;
            }
            input {
                font-size: 17px;
                border-bottom: 1px solid #ccc;
                height: 44px;
                padding-left: 10px;
                background-color: transparent;
                -webkit-tap-highlight-color: transparent;
            }
            .btn-send {
                background-color: transparent;
                font-size: 15px;
            }
            a {
                font-size: 15px;
            }
        }
        .opt-2 {
            input {
                width: 80px;
                margin-right: 5px;
            }
        }
        .opt-3 {
            justify-content: space-between;
        }
    }
    .btn-login {
        background-color: @bgColor;
        color: #fff;
        width: 100%;
    }
}
.bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
</style>